<template>
  <div class="employees-container">
    <div class="app-container boc_flex">
      <el-row :gutter="20">
        <el-col :span="24"
          ><div class="grid-content bg-purple">
            <el-card class="box-card" style="height: 870px">
              <div class="top_box">
                <div class="top_box_left">工单X069</div>
                <el-button type="primary" round @click="$emit('showDialog')"
                  >返回</el-button
                >
              </div>
              <div class="box_timeLine">
                <el-steps :active="active" align-center>
                  <el-step title="工单提交"></el-step>
                  <el-step title="工单确认"></el-step>
                  <el-step title="工单处理中"></el-step>
                  <el-step title="工单审核"></el-step>
                  <el-step title="工单关闭"></el-step>
                </el-steps>
              </div>
              <div class="box_center">
                <el-button
                  type="primary"
                  class="TJSHbtn"
                  round
                  style=""
                  v-if="HD === '回单'"
                  @click="tjshBtn()"
                  >提交审核</el-button
                >
                <el-col :span="12" style="height: 610px">
                  <div class="content content_">
                    <div class="content_left">
                      <ul>
                        <li>
                          <span>工单号：</span><span>{{ rowObj.number }}</span>
                        </li>
                        <li><span>发起人：</span><span>超级管理员</span></li>
                        <li>
                          <span>工单标题：</span
                          ><span>{{ rowObj.gdTitle }}</span>
                        </li>
                        <li>
                          <span>审核部门：</span><span>{{ rowObj.shzy }}</span>
                        </li>
                        <li>
                          <span>创建时间：</span
                          ><span>{{ rowObj.startTime }}</span>
                        </li>
                        <li>
                          <span>截至时间：</span
                          ><span>{{ rowObj.endTime }}</span>
                        </li>
                      </ul>
                    </div>
                    <div class="content_right">
                      <ul>
                        <li><span>提醒次数：</span><span>2</span></li>
                        <li><span>优先级：</span><span>一般</span></li>
                        <li>
                          <span>工单分类：</span
                          ><span>{{ rowObj.gdSort }}</span>
                        </li>
                        <li>
                          <span>工单模板：</span
                          ><span>{{ rowObj.gdFormwork }}</span>
                        </li>
                        <li>
                          <span>接收部门：</span><span>{{ rowObj.jsdw }}</span>
                        </li>
                        <li>
                          <span>签发人：</span><span>{{ rowObj.qfr }}</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="texarea" v-if="!HD">
                    <h2>备注：</h2>
                    <div class="content">
                      <el-input
                        type="textarea"
                        :rows="7"
                        v-model="rowObj.remarks"
                        :disabled="true"
                      ></el-input>
                    </div>
                  </div>
                  <div class="show_texarea" style="display: flex" v-if="HD">
                    <div class="texarea" style="margin-right: 94px">
                      <h2>工单要求：</h2>
                      <div class="content">
                        <el-input
                          type="textarea"
                          style="width: 300px"
                          :rows="6"
                          v-model="bz"
                          :disabled="true"
                        ></el-input>
                      </div>
                    </div>
                    <div class="texarea">
                      <h2>风险分析：</h2>
                      <div class="content">
                        <el-input
                          :disabled="true"
                          type="textarea"
                          style="width: 300px"
                          :rows="6"
                          v-model="bz"
                        ></el-input>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12" style="height: 610px" v-if="!HD">
                  <h2>风险分析：</h2>
                  <div class="content">
                    <el-input
                      :disabled="true"
                      type="textarea"
                      :rows="7"
                      v-model="rowObj.fxfx"
                    ></el-input>
                  </div>
                  <h2>工作措施及要求：</h2>
                  <div class="texarea">
                    <el-input
                      :disabled="true"
                      type="textarea"
                      :rows="7"
                      v-model="rowObj.gzcsjyq"
                    ></el-input>
                  </div>
                </el-col>
                <el-col :span="12" style="height: 610px" v-if="HD === '回单'">
                  <h2>工作汇报：</h2>
                  <div class="content_HD">
                    <el-input
                      :disabled="true"
                      type="textarea"
                      :rows="7"
                      v-model="FXFX"
                    ></el-input>
                  </div>
                  <h2>备注：</h2>
                  <div class="texarea">
                    <el-input
                      :disabled="true"
                      type="textarea"
                      :rows="7"
                      v-model="GZCS"
                    ></el-input>
                  </div>
                </el-col>
              </div>
            </el-card></div
        ></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { submit} from "@/api/zngd.js";

export default {
  data() {
    return {
      active: 2, //当前进度0开始
      bz: "",
      FXFX: "",
      GZCS: "",
    };
  },
  props: {
    itemNum: String,
    HD: String,
    rowObj: Object,
  },
  mounted() {
    switch (this.itemNum) {
      case "草稿":
        this.active = 0;
        // 0
        break;
      case "待确认":
        this.active = 1;
        // 1
        break;
      case "处理中":
        this.active = 2;
        // 2
        break;
      case "待审核":
        this.active = 3;
        // 3
        break;
      case " 已关闭":
        this.active = 4;
        // 4
        break;
      // case "已关闭":
      //   this.active = 5;
      //   // 4
      //   break;

      default:
        break;
    }
  },

  methods: {
    tjshBtn(){
      console.log(this.rowObj)
      submit(this.rowObj).then(res=>{
        this.$emit('showDialog')
        this.$parent.listVals()
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.employees-container {
  .top_box {
    display: flex;
    height: 50px;
    line-height: 50px;
    justify-content: space-between;
    margin-bottom: 30px;
    align-items: center;
    .top_box_left {
      font-size: 30px;
      font-weight: 400;
    }
    .el-button--primary {
      height: 20px;
      line-height: 3px;
    }
  }
  .box_timeLine {
    margin-bottom: 80px;
  }
  .box_center {
    display: flex;
    height: 100%;
    padding: 20px;
    .content_left {
      margin-right: 40px;
    }
    .content_ {
      height: 326px !important;
      display: flex;
      ul {
        li {
          font-size: 20px;
          margin: 23px 0 0 0;
          display: flex;
          & span:nth-child(1) {
            width: 120px;
          }
        }
      }
    }
    .content {
      height: 250px;
    }
    .texarea {
      height: 200px;
    }
  }
  li {
    list-style: none;
  }

  .content_HD {
    height: 160px;
  }
  .TJSHbtn {
    position: absolute;
    right: 61px;
    bottom: 20px;
  }
}
</style>
